<template>
  <div class="tabs">
    <UserInfoComp>
      <div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="电影" name="first"></el-tab-pane>
          <el-tab-pane label="电影排片" name="second"></el-tab-pane>
          <el-tab-pane label="游戏发行商" name="third"></el-tab-pane>
          <el-tab-pane label="游戏" name="fourth"></el-tab-pane>
        </el-tabs>
      </div>
    </UserInfoComp>

    <hr />

    <!-- 内容 -->
    <div v-if="activeName === 'first'">
      <FilmView></FilmView>
    </div>
    <div v-if="activeName === 'second'">
      <FilmPlayView></FilmPlayView>
    </div>
    <div v-if="activeName === 'third'">
      <GamePublisherView></GamePublisherView>
    </div>
    <div v-if="activeName === 'fourth'">
      <GameView></GameView>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import FilmView from './FilmView.vue'
import FilmPlayView from './FilmPlayView.vue'
import GamePublisherView from './GamePublisherView.vue'
import GameView from './GameView.vue'
import UserInfoComp from '@/components/UserInfoComp.vue'

const activeName = ref('first')
</script>

<style scoped lang="scss">
.tabs {
  padding: 0.5rem 1rem;
  & > div {
    margin-top: 1rem;
  }
}
::v-deep .el-tabs__header {
  margin: 0;
}
::v-deep .el-tabs__nav-wrap:after {
  background-color: transparent;
}
::v-deep .el-tabs__item:focus {
  box-shadow: none;
}
</style>
